{{extend './base.html'}}
{{block 'title'}}
注册
{{/block}}
{{block 'style'}}
      <style>
    .Form{
      padding: 20px;
      width: 500px;
      margin: 0 auto;
      border: 1px solid #c6c8ca;
    }
    .loginForm button{
      width: 100%;
    }
    .row{
      margin-top: 100px;
    }
    a:hover{
      text-decoration: none;
    }
    #reg-btn{
      width: 100%;
    }
  </style>
{{/block}}
{{block 'content'}}
<div class="container">
  <div class="row">
    <form class="Form" autocomplete="off">
      <div class="form-group">
        <label for="inputUser">用户名</label>
        <input type="text" class="form-control" name="username"
               id="inputUser">
      </div>
      <div class="form-group">
        <label for="email">邮箱</label>
        <input type="email" class="form-control" name="email" id="email">
      </div>
      <div class="form-group">
        <label>密码</label>
        <input type="password" class="form-control" name="password" id="password">
      </div>
      <div class="form-group">
        <label>确认密码</label>
        <input type="password" class="form-control" name="password1" id="password1">
      </div>
      <button type="button" class="btn btn-primary" id="reg-btn">注册</button>
      <div class="form-group" style="margin-top:1rem;margin-bottom: 0;text-align: right;">
        已有账号?<a href="/user/login" class="register">点击登录</a>
      </div>
    </form>
  </div>
</div>
{{/block}}
{{block 'js'}}
<script type="text/javascript">
  $('#reg-btn').click(function () {
    const username = $('#inputUser').val()
    const email = $('#email').val()
    const password = $('#password').val()
    const password1 = $('#password1').val()
    const emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    if (!username || !email || !password1 || !password) {
      cocoMessage.warning("所有表单项必填");
    } else if (emailReg.test(email) === false) {
      cocoMessage.warning("邮箱格式错误");
    } else if (password1 !== password) {
      cocoMessage.warning("两次输入的密码不一致");
    } else if (password.length < 6 || password.length > 12){
      cocoMessage.warning("密码长度需为6-13位");
    } else {
      $.ajax({
        url: '/user/register',
        type: 'post',
        data: {username, password, email},
        dataType: 'json',
        success: function (ret) {
          if (ret.err_code === 0) {
            // alert(ret.msg);
            window.location = '/';
          } else {
            cocoMessage.warning(ret.msg);
          }
        }
      })
    }
  })
</script>
{{/block}}
